import { StyleSheet, TouchableOpacity, ScrollView, Image, View, FlatList,Dimensions } from 'react-native'
import useResponsive from '@/rem/rem'
import { ThemedText } from '@/components/ThemedText'
import { ThemedView } from '@/components/ThemedView'
import { useEffect, useState } from 'react'
import { useNavigation } from '@react-navigation/native';
import { ListItem } from '@rneui/themed';
import { useRouter } from 'expo-router'
import { Avatar, Icon } from 'react-native-elements'
import { explore_list } from '@/mock/mockjs'
const { width, height } = Dimensions.get('window');
export default function TabTwoScreen() {
	const { w, h, fs } = useResponsive()
	const router = useRouter()

	const styles = StyleSheet.create(
		{
			container: {
				width: width,
				// maxHeight:h(755),
				// height: h(755),
				backgroundColor: '#f3f3f3',
				paddingLeft: 5,
				paddingRight: 5,
			},
			explore_container: {
				width: width,
				height: h(100),
				backgroundColor: 'white',
			},

			text: {
				fontSize: 14, // 字体大小
				color: '#333', // 字体颜色
				marginRight: 4, // 文字与图标的间距
			},
			address_container: {
				flexDirection: 'row', // 水平方向排列
				// justifyContent: 'space-around', // 等间距排列
				// alignItems: 'center', // 垂直居中对齐
				height: h(50), // 设置高度
				// backgroundColor: 'red', // 背景颜色
			},
			exporl_list: {
				width: width,
				// height: h(900),
				// maxHeight:h(900),
				backgroundColor: 'f3f3f3',
				marginTop: 5,
				paddingBottom: 150,
			},
			shang_img: {
				width: 55,
				height: 55,
				borderRadius: 50,
			}, item: {
				// marginBottom: 16
			},
			mask: {
				position: 'absolute',
				top: 40,
				left: 0,
				right: 0,
				bottom: 0,
				backgroundColor: 'rgba(0, 0, 0, 0.5)',
				zIndex: 999
			},
			mask_contain1: {
				width: width,
				height: h(200),
				backgroundColor: 'red',
				zIndex: 1001
			},
			mask_contain2: {
				width: width,
				height: h(200),
				backgroundColor: 'pink',
				zIndex: 1001
			},
			mask_contain3: {
				width: width,
				height: h(200),
				backgroundColor: 'blue',
				zIndex: 1001
			}
		}
	)
	const [list, setlist] = useState([])
	useEffect(() => {
		setlist(explore_list.exploreData)
	}, [])


	// 控制手风琴现实的状态
	const [expanded1, setExpanded1] = useState<boolean>(false)
	const [expanded2, setExpanded2] = useState<boolean>(false)
	const [expanded3, setExpanded3] = useState<boolean>(false)
	const [isMaskVisible1, setIsMaskVisible1] = useState(false);
	const [isMaskVisible2, setIsMaskVisible2] = useState(false);
	const [isMaskVisible3, setIsMaskVisible3] = useState(false);
	// 
	const list2 = [
		{
			'name': '飞机',
			'avatar_url': 'https://ts4.cn.mm.bing.net/th?id=OIP-C.WatSLewf8XaK6bb6u67mkgHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
			'subtitle': '标题'
		}, {
			'name': '飞机',
			'avatar_url': 'https://ts4.cn.mm.bing.net/th?id=OIP-C.WatSLewf8XaK6bb6u67mkgHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
			'subtitle': '标题'
		}, {
			'name': '飞机',
			'avatar_url': 'https://ts4.cn.mm.bing.net/th?id=OIP-C.WatSLewf8XaK6bb6u67mkgHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
			'subtitle': '标题'
		}, {
			'name': '飞机',
			'avatar_url': 'https://ts4.cn.mm.bing.net/th?id=OIP-C.WatSLewf8XaK6bb6u67mkgHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
			'subtitle': '标题'
		}
	]

	return (
		<ThemedView style={styles.container}>
			{/* 筛选地址 */}
			{isMaskVisible1 && <ThemedView style={styles.mask} >
				<ThemedView style={styles.mask_contain1}>

				</ThemedView>

			</ThemedView>}
			{isMaskVisible2 && <ThemedView style={styles.mask} >
				<ThemedView style={styles.mask_contain2}>
				</ThemedView>
			</ThemedView>}
			{isMaskVisible3 && <ThemedView style={styles.mask} >
				<ThemedView style={styles.mask_contain3}>
				</ThemedView>
			</ThemedView>}
			{/* 筛选标签 */}
			<ThemedView style={styles.address_container}>
				<TouchableOpacity style={styles.item}>
					<ListItem.Accordion
						content={
							<View>
								<ListItem.Content>
									<ListItem.Title>全国</ListItem.Title>
								</ListItem.Content>
							</View>
						}
						isExpanded={expanded1}
						onPress={() => {
							setExpanded1(!expanded1);
							setIsMaskVisible1(!isMaskVisible1);
						}}
					>
					</ListItem.Accordion>
				</TouchableOpacity>
				<TouchableOpacity style={styles.item}>
					<ListItem.Accordion
						content={
							<View>
								<ListItem.Content>
									<ListItem.Title>资质</ListItem.Title>
								</ListItem.Content>
							</View>
						}
						isExpanded={expanded2}
						onPress={() => {
							setExpanded2(!expanded2);
							setIsMaskVisible2(!isMaskVisible2);

						}}
					>
					</ListItem.Accordion>
				</TouchableOpacity>
				<TouchableOpacity style={styles.item}>
					<ListItem.Accordion
						content={
							<View>
								<ListItem.Content>
									<ListItem.Title>信誉</ListItem.Title>
								</ListItem.Content>
							</View>
						}
						isExpanded={expanded3}
						onPress={() => {
							setExpanded3(!expanded3);
							setIsMaskVisible3(!isMaskVisible3);

						}}
					>
					</ListItem.Accordion>
				</TouchableOpacity>
			</ThemedView>
			{/* 滚动视图 */}
			<ScrollView >
				{/* 商家信息 */}
				<ThemedView style={styles.explore_container}>
					<FlatList
						horizontal={true}
						showsHorizontalScrollIndicator={false}
						data={list}
						keyExtractor={(item) => item.id}
						renderItem={({ item }) => (
							<ThemedView style={{
								width: w(55),
								height: h(55),
								marginLeft: 30,
								borderRadius: 50,
								marginTop: 10,
							}}>
								<Image source={{ uri: item.img }} style={styles.shang_img} />
								{/* <ThemedText onPress={() => router.push(`/production/shop?item=${encodeURIComponent(JSON.stringify(item))}`)} style={{ marginLeft: 70, marginTop: -60 }}>{item.name}</ThemedText> */}
								<ThemedText onPress={() => router.push(`/production/shop?item=${encodeURIComponent(JSON.stringify(item))}`)} style={{ fontWeight: 'bold', textAlign: 'center', fontSize: 14 }} numberOfLines={1}>{item.name}</ThemedText>
							</ThemedView>
						)}
					/>
				</ThemedView>
				<ThemedView style={styles.exporl_list}>
					{
						list.map((item, index) =>
							<ThemedText style={{ marginTop: 10, height: h(250) }} key={item.id}>
								<ThemedView style={{ width: w(375), height: h(80) }}>
									<Image style={{ width: 60, height: 60, borderRadius: 50 }}
										source={{ uri: item.img }} />
									<ThemedText onPress={() => router.push(`/production/shop?item=${encodeURIComponent(JSON.stringify(item))}`)} style={{ marginLeft: 70, marginTop: -60 }}>{item.name}</ThemedText>
									<ThemedText style={{ marginLeft: 70, fontSize: 13 }}>{item.location}</ThemedText>
									<ThemedText style={{ marginLeft: 70, fontSize: 13 }}>在售{item.currentCount}只|担保交易量{item.totalCount}只</ThemedText>
								</ThemedView>
								<ThemedView style={{ width: w(375), height: h(160), flexDirection: 'row', flex: 1, justifyContent: 'space-between' }}>
									{
										item.petlist.map((petitem => (
											<ThemedView style={{ width: w(120), height: h(162) }} key={petitem.id}>
												<Image style={{ width: w(120), height: h(120) }} source={{ uri: petitem.img[0] }} />
												<ThemedText >
													<ThemedText>
														{petitem.pet_name}
													</ThemedText>
													<ThemedText style={{ textAlign: 'right' }}>
														{petitem.price}
													</ThemedText>
												</ThemedText>
											</ThemedView>
										)))
									}
								</ThemedView>
							</ThemedText>
						)
					}
				</ThemedView>
			</ScrollView>
		</ThemedView>
	)
}